import React from 'react'
import { changeNav } from '../../../actions'
import { wxGetSubProduct, wxzhctProductConf } from '../../../actions/smartDr.js'
import { connect } from 'react-redux'
import { List, WhiteSpace, Toast, Icon, InputItem, Button } from 'antd-mobile'
import CSSModules from 'react-css-modules'
import styles from './renew.less'
import hhistory from '../../../history'
import { ajaxGet, ajaxPost } from 'wxAjaxUtil';

const Item = List.Item;
let productCode;
let renewalProductCode;
let renewalStoreCode;
let params = {};
let returnData = {
    "productCode": "",
    "remark": "",
    "renewalInfo": [],
    "renewalProductCode": "",
    "renewalDuration": "",
    "payableFee": ""
};
let renewalInfo = [];
let objInfo = {};
let iconStoreCode = require('../../../components/assets/icon_storeCode.svg');

@CSSModules(styles, { allowMultiple: true })
class OpenSmartdr extends React.Component {
    constructor(props) {
        super(props);
        this.sureRenew = this.sureRenew.bind(this);
    }

    state = {
        reInfo: [],
        note: '',
        returnData: {}
    }

    componentDidMount() {
        this.props.tochangeNav({
            title: "续费", rbtn: []
        });
        params = {
            "productCode": productCode,
            "renewalProductCode": renewalProductCode,
            "renewalStoreCode": renewalStoreCode
        };
        ajaxPost('app/product/renew', params).then((res) => {
            if (res.code == '-40024') {   //门店编号为空
                Toast.fail('续费门店为空!', 1);
            } else {
                let renewData = res.data;
                //点确定之后的返回值
                returnData.productCode = params.productCode;
                renewalInfo = [];
                objInfo = {};
                this.setState({
                    reInfo: renewData.renewalInfo
                })
                if (this.state.reInfo.length > 0) {
                    for (var i = 0; i < this.state.reInfo.length; i++) {
                        objInfo.groupCode = this.state.reInfo[i].groupCode;
                        objInfo.serialCode = this.state.reInfo[i].serialCode;
                        objInfo.storeCode = this.state.reInfo[i].storeCode;
                        objInfo.renewalFee = this.state.reInfo[i].renewalFee
                        renewalInfo.push(objInfo);
                    }
                }
                returnData.renewalInfo = renewalInfo;
                returnData.renewalProductCode = params.renewalProductCode;
                returnData.renewalDuration = renewData.renewalDuration;
                returnData.payableFee = renewData.payableFee;
                this.setState({
                    returnData: returnData
                })
                //返回值结束
            }
        }, (res) => {
            Toast.fail('获取续费门店失败!', 1);
        })
    }

    sureRenew() {
        this.state.returnData.remark = this.state.note;
        ajaxPost('app/product/renew', this.state.returnData).then((res) => {
            Toast.success('您已续费成功！', 1);
        }, (res) => {
            Toast.fail('续费失败！', 1);
        })
    }

    render() {
        productCode = this.props.location.state.productCode;
        renewalProductCode = this.props.location.state.renewalProductCode;
        renewalStoreCode = this.props.location.state.renewalStoreCode;

        return (
            <div>
                <WhiteSpace size='md' styleName="yellow" />
                <List>
                    <Item extra='续费门店' arrow="horizontal">
                        共<span styleName="red">{renewalStoreCode.length}</span>个门店
			        </Item>
                </List>
                <div>
                    {
                        this.state.reInfo.map((item, index) => {
                            return (
                                <div styleName="listWrap" key={index}>
                                    <img styleName="listImg" src={item.storeLogo} />
                                    <div styleName="mdInfo">
                                        <div>{item.storeName}</div>
                                        <div styleName="infoCode"><Icon className="iconStoreCode" type={iconStoreCode} size={"sm"} /><span styleName="storeCode">{item.storeCode}</span></div>
                                    </div>
                                    <div styleName="checkbox">￥{item.renewalFee}</div>
                                </div>
                            )
                        })
                    }
                </div>
                <WhiteSpace size='md' styleName="yellow" />
                <List>
                    <Item extra={this.state.returnData.renewalDuration + '年'}>购买时长</Item>
                </List>
                <WhiteSpace size='md' styleName="yellow" />
                <List>
                    <InputItem placeholder="备注信息选填" onBlur={value => { this.state.note = value }} />
                </List>
                <div styleName="footer">
                    <div styleName="mlper5">应付款总计 <span styleName="red">￥{this.state.returnData.payableFee}</span></div>
                    <Button type="primary" onClick={this.sureRenew} className="sureBtn">确认续费</Button>
                </div>
            </div>
        )
    }
}

const mapStateToProps = (state) => ({

})
const mapDispatchToProps = (dispatch) => ({
    tochangeNav: navogj => dispatch(changeNav(navogj))
})

export default connect(mapStateToProps, mapDispatchToProps)(OpenSmartdr)